/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import Taro, { Component } from '@tarojs/taro'

// project
import { CPage, CContent, CHeader, CFooter, CFloat, CAround, CBetween, CCenter, CRow, CWrap, CLine, CHand, CItemX, CItemY, CText, CLabel, CSvg, CImage, CButton, CColumn } from '../../../library/comp';
import { Base64, Gen, Time, Zip, Session, Storage, Http } from '../../../library/func';
import Icon from '../../../project/style/icon';

import DoHttp from '../../../project/func/http/http';

/******************************************************************************************
 * Export Class
 ******************************************************************************************/
export default class Gift extends Component {

	/*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
	constructor(props) {
		super(props);

		/**
		 * state
		 */
		this.state = {
			list:[],

			set_tab_val:1,

		}
	}

	/*------------------------------------------------------------------------------------
	 * 生命周期
	 *-----------------------------------------------------------------------------------*/
	// didMount
	componentDidMount() {
		this.getData();
	}

	
	/*------------------------------------------------------------------------------------
	 * 事件处理
	 *-----------------------------------------------------------------------------------*/
	// onClick
	onClick = (e)=> {
		
	}
    
    // onRedirect
    onRedirect = (url, e)=> {
        wx.redirectTo({
            url: url
        })
    }

    // onNavigate
    onNavigate = (url, e)=> {
		wx.navigateTo({
			url: url
		})
    }

	/*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/
	config = {
        navigationBarTitleText: '礼包详情',
        navigationBarBackgroundColor: '#dd2f3c',
        navigationBarTextStyle: '#fff'
    }
	

	getData(type=""){
		DoHttp.Loading({
			url:'product/list.php',
			data:{
				cid:2,
				sorttype:type,
			},
			success:(res)=>{
				this.setState({
					list:res,
				})
			}
		})

	}

	 
	//tab选项卡改变颜色  其实是异步取值
	onTabCheck = (val, e)=>{
		this.setState({
			set_tab_val:val,
		})
		let type_str = '';
		switch(val){
			case 1:
				type_str = "";
			break;
			case 2:
				type_str = "sale";
			break;
			case 3:
				type_str = "new";
			break;
			
		}
		this.getData(type_str);
	}



	/*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/

	render () {

		let tabti = 
		<CRow bg='white' h='60'>
			<CHand class="f1" x="center" y="center" onClick={ this.onTabCheck.bind(this,1) }>
				{ this.state.set_tab_val == 1 ?  
					<CText color="#de3940" pb='6' style="border-bottom:solid #de3940 4rpx" mt="4" size='28'>全部商品</CText>
					 : 
					<CText size='28' pb='6'>全部商品</CText>
				}
			</CHand>

			<CHand class="f02" h="30" w="2" bg="#eee"></CHand>

			<CHand class="f1" x="center" y="center" onClick={ this.onTabCheck.bind(this,2)}>
				{ this.state.set_tab_val == 2 ?  
					<CText color="#de3940" pb='6' style="border-bottom:solid #de3940 4rpx" mt="4" size='28'>销售排序</CText>
					 : 
					<CText size='28' pb='6'>销售排序</CText>
				}
			</CHand>

			<CHand class="f02" h="30" w="2" bg="#eee"></CHand>


			<CHand class="f1" x="center" y="center" onClick={ this.onTabCheck.bind(this,3)}>
				{ this.state.set_tab_val == 3 ?  
					<CText color="#de3940" pb='6' style="border-bottom:solid #de3940 4rpx" mt="4" size='28'>最新上架</CText>
					 : 
					<CText size='28' pb='6'>最新上架</CText>
				}			
			</CHand>

		</CRow>;

		return (
			<CPage>
				<CContent>
					
					{/* 顶部权益介绍图 */}
					<CRow bg='#fff'>
						<image style="width:100%; height:750rpx" src="http://image.mod.hesq.com.cn/rushbuy/assets/20181113/quanyitop.png"></image>
					</CRow>

					{/* 中间图片标题 */}
					<CRow bg='white' x="'center">
						<image style="width:90%; height:115rpx" src="http://image.mod.hesq.com.cn/rushbuy/assets/20181113/chuangyeti.png"></image>
					</CRow>

					{/* 过滤tab标题 */}
					{tabti}
					
					{/* 商品列表单元 */}
					<CColumn>

					{this.state.list.map((item, key) =>{

						return(
							<CItemX class="vip_proc_imgp" bg="white" mx="20" y="center" style="width:100%" mt="10">
								<CImage  mode='aspectFit' src={ item.object.set_image_small }></CImage>
								<CColumn my="20">
									<CLine y="top" style="overflow:hidden; font-size:30rpx; font-weight:800; line-height:40rpx; height:80rpx">{item.set_name}</CLine>
									<CLine size="28">
										<CText style="font-size:20rpx" color="#f00"></CText>
									</CLine>
	
									<CLine size="28" style="margin-top:70rpx">
										<CBetween>
											<text style="font-size:45rpx; font-weight:800; color:#C6985B">￥{item.set_price}</text>
											<CButton color="#fff" bg="red" ra="60" size="28" px="20" py="10"
												onClick={this.onNavigate.bind(this, '/screen/vip/normal/detail?id=' + item.id)}
											>购买升级VIP</CButton>
										</CBetween>
									</CLine>
								</CColumn>
							</CItemX>
						);

					})}

					</CColumn>

					{/* 商品列表单元end */}

				</CContent>
			</CPage>
		)
	}
}


